//	选择内置图片

import styles from 'src/pages/AnalyseManage/EditReport/index.module.scss';
import { Modal } from 'antd';
import React, { useState } from 'react';

interface IProps {
	fileList: Array<any>;
	initChooseImage: Array<string>;
	handleChooseImage: ( img ) => void;
}

const ChooseImage = ( props: IProps ) => {
	const [ modalVisible, setModalVisible ] = useState( false );
	const { fileList, initChooseImage, handleChooseImage } = props;

	const handleChoose = ( img ) => {
		handleChooseImage( img );
		setModalVisible( false );
	};

	return (
		<>
			<div className={ styles.choose_image } onClick={ () => setModalVisible( true ) }>
				{ fileList.length > 0 ? <img src={ fileList[ 0 ].url } alt="" key={ new Date().getTime() }/> : null }
				{ fileList.length > 0 ? <span className={ styles.image_hide }>点击此处进行更换</span> : <span>点击此处进行选择</span> }
			</div>

			<Modal title='请选择图片' footer={ null } mask={ true } width={ 1055 } visible={ modalVisible } onCancel={ () => setModalVisible( false ) }>
				<div className='image_selector_body'>

					{
						initChooseImage.map( ( v, i ) => (
							<div className='image_selector_dummy' key={ i } onClick={ () => handleChoose( v ) }>
								<img src={ v } alt=""/>
							</div>
						) )
					}

				</div>
			</Modal>
		</>
	);
};

export default React.memo( ChooseImage );